<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:replace="~{layout/base :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 知籁平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .register-container {
            max-width: 550px;
            margin: 60px auto;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .card-header {
            background-color: #f8f9fa;
            border-bottom: none;
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
            padding: 20px;
        }
        .card-body {
            padding: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .btn-register {
            background-color: #28a745;
            border-color: #28a745;
            padding: 10px 20px;
            font-weight: 500;
        }
        .btn-register:hover {
            background-color: #218838;
            border-color: #1e7e34;
        }
        .alert {
            display: none;
        }
        .progress {
            height: 5px;
        }
        .password-strength-text {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <section>
        <div class="container register-container">
            <div class="card">
                <div class="card-header text-center">
                    <h4 class="mb-0">新用户注册</h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger" id="registerError" role="alert" th:if="${param.error}" style="display: block;">
                        注册失败，请检查输入或稍后重试。
                    </div>
                    <div class="alert alert-success" id="registerSuccess" role="alert" th:if="${param.success}" style="display: block;">
                        注册成功，即将跳转到登录页面...
                    </div>
                    
                    <form id="registerForm" th:action="@{/api/user/register}" method="post">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-user"></i></span>
                                </div>
                                <input type="text" class="form-control" id="username" name="username" 
                                       placeholder="请输入用户名" required minlength="3" maxlength="20">
                            </div>
                            <small class="form-text text-muted">用户名长度为3-20个字符</small>
                            <div class="invalid-feedback" id="usernameError"></div>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">电子邮箱</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-envelope"></i></span>
                                </div>
                                <input type="email" class="form-control" id="email" name="email" 
                                       placeholder="请输入电子邮箱" required>
                            </div>
                            <div class="invalid-feedback" id="emailError"></div>
                        </div>
                        
                        <div class="form-group">
                            <label for="password">密码</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-lock"></i></span>
                                </div>
                                <input type="password" class="form-control" id="password" name="password" 
                                       placeholder="请输入密码" required minlength="6">
                            </div>
                            <small class="form-text text-muted">密码至少6个字符</small>
                            <div class="mt-2">
                                <div class="d-flex justify-content-between">
                                    <span>密码强度:</span>
                                    <span class="password-strength-text" id="strengthText">弱</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar bg-danger" id="passwordStrength" style="width: 0%"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="confirmPassword">确认密码</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-lock"></i></span>
                                </div>
                                <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" 
                                       placeholder="请再次输入密码" required>
                            </div>
                            <div class="invalid-feedback" id="confirmPasswordError">两次密码输入不一致</div>
                        </div>
                        
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="agreeTerms" name="agreeTerms" required>
                            <label class="form-check-label" for="agreeTerms">
                                我已阅读并同意 <a href="#" data-toggle="modal" data-target="#termsModal">用户协议</a>
                            </label>
                        </div>
                        
                        <div class="form-group mb-2">
                            <button type="submit" class="btn btn-success btn-register btn-block" id="registerBtn">
                                <i class="fa fa-user-plus mr-2"></i>注册
                            </button>
                        </div>
                        
                        <div class="text-center">
                            <p>已有账号？ <a href="/login">立即登录</a></p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 用户协议模态框 -->
        <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="termsModalLabel">用户协议</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <h5>知籁平台用户协议</h5>
                        <p>欢迎使用知籁平台。在使用本平台服务前，请您仔细阅读以下条款。使用本平台即表示您已同意接受这些条款的约束。</p>
                        
                        <h6>1. 服务内容</h6>
                        <p>知籁平台提供电子书的上传、下载、分享等服务，用户可以在平台上查找、阅读、下载各类电子书。</p>
                        
                        <h6>2. 用户账户</h6>
                        <p>用户需要使用邮箱注册账户，并对账户安全负责。用户应保管好账户信息，对通过该账户进行的所有活动负责。</p>
                        
                        <h6>3. 用户行为规范</h6>
                        <p>用户不得上传侵犯他人著作权的内容，不得发布违法、有害信息，不得从事任何可能损害平台正常运行的行为。</p>
                        
                        <h6>4. 知识产权</h6>
                        <p>用户上传内容的著作权归原作者所有，用户应确保拥有上传内容的合法权利或授权。</p>
                        
                        <h6>5. 隐私保护</h6>
                        <p>平台重视用户隐私，将按照隐私政策收集、使用和保护用户信息。</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="agreeBtn" data-dismiss="modal">我已阅读并同意</button>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
        <script>
            $(document).ready(function() {
                // 密码强度检测
                $('#password').on('input', function() {
                    const password = $(this).val();
                    let strength = 0;
                    
                    // 长度检查
                    if (password.length >= 6) strength += 20;
                    if (password.length >= 8) strength += 20;
                    
                    // 包含数字
                    if (/\d/.test(password)) strength += 20;
                    
                    // 包含小写字母
                    if (/[a-z]/.test(password)) strength += 20;
                    
                    // 包含大写字母或特殊字符
                    if (/[A-Z]/.test(password) || /[^a-zA-Z0-9]/.test(password)) strength += 20;
                    
                    // 更新进度条
                    $('#passwordStrength').css('width', strength + '%');
                    
                    // 更新文本和颜色
                    if (strength < 40) {
                        $('#passwordStrength').removeClass().addClass('progress-bar bg-danger');
                        $('#strengthText').text('弱');
                    } else if (strength < 70) {
                        $('#passwordStrength').removeClass().addClass('progress-bar bg-warning');
                        $('#strengthText').text('中');
                    } else {
                        $('#passwordStrength').removeClass().addClass('progress-bar bg-success');
                        $('#strengthText').text('强');
                    }
                });
                
                // 确认密码验证
                $('#confirmPassword').on('input', function() {
                    if ($(this).val() !== $('#password').val()) {
                        $(this).addClass('is-invalid');
                        $('#confirmPasswordError').show();
                    } else {
                        $(this).removeClass('is-invalid');
                        $('#confirmPasswordError').hide();
                    }
                });
                
                // 用户名验证
                $('#username').on('blur', function() {
                    const username = $(this).val();
                    if (username.length >= 3) {
                        $.get('/api/user/check-username?username=' + username, function(response) {
                            if (response.status === 200 && response.data === true) {
                                $('#username').removeClass('is-invalid').addClass('is-valid');
                                $('#usernameError').hide();
                            } else {
                                $('#username').removeClass('is-valid').addClass('is-invalid');
                                $('#usernameError').text('该用户名已被使用').show();
                            }
                        });
                    }
                });
                
                // 邮箱验证
                $('#email').on('blur', function() {
                    const email = $(this).val();
                    if (email && /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
                        $.get('/api/user/check-email?email=' + email, function(response) {
                            if (response.status === 200 && response.data === true) {
                                $('#email').removeClass('is-invalid').addClass('is-valid');
                                $('#emailError').hide();
                            } else {
                                $('#email').removeClass('is-valid').addClass('is-invalid');
                                $('#emailError').text('该邮箱已被注册').show();
                            }
                        });
                    }
                });
                
                // 用户协议同意按钮
                $('#agreeBtn').click(function() {
                    $('#agreeTerms').prop('checked', true);
                });
                
                // 表单提交前验证
                $('#registerForm').submit(function(e) {
                    // 检查密码是否一致
                    if ($('#password').val() !== $('#confirmPassword').val()) {
                        e.preventDefault();
                        $('#confirmPassword').addClass('is-invalid');
                        $('#confirmPasswordError').show();
                        return false;
                    }
                    
                    // 检查是否同意用户协议
                    if (!$('#agreeTerms').is(':checked')) {
                        e.preventDefault();
                        alert('请阅读并同意用户协议');
                        return false;
                    }
                    
                    // 检查用户名和邮箱是否有效
                    if ($('#username').hasClass('is-invalid') || $('#email').hasClass('is-invalid')) {
                        e.preventDefault();
                        alert('请检查用户名和邮箱是否有效');
                        return false;
                    }
                    
                    return true;
                });
            });
        </script>
    </section>
</body>
</html> 